<template>
    <div class="orh-trees">
        <!-- <div class="orh-trees-title" v-if="hideTitle">
            <Tooltip :content="isOpen?'收起菜单':'展开菜单'" placement="bottom" transfer class="sfmu">
                <span @click="shMenu"><img v-if="isOpen" src="@/static/img/ss.png" width="20">
                <img v-else src="@/static/img/ssz.png" width="20"></span>
            </Tooltip>
            <Breadcrumb>
                <BreadcrumbItem v-for="(item,ind) in title" :key="ind">{{item}}</BreadcrumbItem>
            </Breadcrumb>
        </div> -->
        <div class="orh-trees-tree" :style="{top: hideTitle?'40px':'0'}">
            <div class="cont_heads" v-if="treesHead">
                <h4 style="font-size:14px;font-weight:700;color:#222">{{treesHead.title}}</h4>
                <Button type="primary" size="small" @click="subMenu" v-if="treesHead.button">{{treesHead.button_text}}</Button>
            </div>
            <div class="tresscon">
                <slot name="trees"></slot>
            </div>
        </div>
        <div class="orh-trees-body" :style="{top: hideTitle?'40px':'0'}">
            <div class="orh-trees-body-tags" v-if="$slots.tag" style="padding:0">
                <slot name="tag"></slot>
            </div>
            <div v-if="$slots.custom" class="orh-trees-body-custom" :style="{height: $slots.tag?'calc(100% - 40px)':'100%'}">
                <slot name ="custom"></slot>
            </div>
            <div v-if="!$slots.custom" class="orh-trees-body-heads" v-show="!hideHandel">
                <div style="padding-left:9px">
                    <Tooltip content="添加" placement="bottom" class="icon_handel" v-button="add">
                        <span @click="toAdd"><Icon type="plus" size="22"></Icon></span>
                    </Tooltip>
                    <Tooltip content="删除" placement="bottom" class="icon_handel" v-button="del">
                        <span @click="toDel"><Icon type="trash-b" size="22"></Icon></span>
                    </Tooltip>
                    <Tooltip content="截图" placement="bottom" class="icon_handel" v-if="canvas">
                        <span @click="toCanvas"><Icon type="image" size="22"></Icon></span>
                    </Tooltip>
                    <slot name="option"></slot>
                </div>
                <div class="right_handels">
                    <Input v-model="value" icon="search" placeholder="请输入搜索内容" style="width: 200px;" class="icon_handel" size="small" @on-click="toSearch" @on-enter="toSearch" v-if="search">
                        <Select v-model="before" slot="prepend" style="width: 70px" v-if="searchOption">
                            <Option value="day" v-for="(item,index) in searchOption" :key="index" :value="item.value">{{item.label}}</Option>
                        </Select>
                    </Input>
                    <Tooltip content="刷新" placement="bottom" class="icon_handel" v-if="reload">
                        <span @click="toReload"><Icon type="loop" size="22"></Icon></span>
                    </Tooltip>
                </div>
            </div>
            <div v-if="!$slots.custom" class="orh-trees-body-content" :style="{top: !hideHandel? $slots.tag?'80px':'40px':'0'}">
                <slot name="content"></slot>
            </div>
        </div>
        <slot name="others"></slot>
    </div>
</template>

<script>

    import html2canvas from 'html2canvas';

    export default {
        data() {
            return {
                value:'',
                before: this.searchOptionSelected != undefined ? this.searchOptionSelected:null,
                // before: null,
                title: []
            }
        },
        props: {
            hideTitle: {
                type: Boolean,
                default: true
            },
            canvas: {
                type: Boolean,
                default: false
            },
            'add': {
                type: String,
                default: ''
            },
            'del': {
                type: String,
                default: ''
            },
            'reload': Boolean,
            'search': {
                type: Boolean,
                default: false
            },
            'hideHandel': {
                type: Boolean,
                default: false
            },
            'treesHead': Object,
            'searchOptionSelected': String,
            'searchOption': Array
        },
        methods: {
            toAdd() {
                this.$emit('on-add');
            },
            toDel() {
                this.$emit('on-del');
            },
            toReload() {
                this.value=''
                this.$emit('on-reload');
            },
            toSearch() {
                this.$emit('on-search',this.value,this.before);
            },
            subMenu() {
                this.$emit('on-submenu');
            },
            toCanvas() {
                let _this = this
                this.$emit('on-canvas',(data) => {
                    _this.screenshot(data)
                });
            },
            screenshot(table) {
                // this.$emit('on-canvas');
                // let table = this.canvas.$el;
                html2canvas(table,{
                    allowTaint: true,
                    imageTimeout: 0,
                    removeContainer: true,
                }).then(canvas => {
                    var url = canvas.toDataURL('image/png', 1.0);
                    let a = document.createElement('a');
                    a.href = url;
                    a.download = '未命名';
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                });
            },
            shMenu() {
                let bool = !this.isOpen
                this.$store.commit('upIsOpen',bool)
            }
        },
        created() {
            // let route = this.$route.fullPath.split('/')
            // let modules = this.$modules
            // let arr = []
            // let moditem = modules.find(item=> item.path == route[1])
            // arr.push(moditem.alias[this.lang])
            // if(moditem.children && moditem.children.length) {
            //     let rest = moditem.children.find(item=> item.path == route[2])
            //     arr.push(rest.alias[this.lang])
            // }
            // this.title = arr
        }
    }
</script>

<style lang="less">
.orh-trees {
    width: 100%;
    height: 100%;
    // position: relative;
    .orh-trees-title {
        position: absolute;
        left: 0; right: 0;
        top: 0;
        height: 40px;
        border-bottom: 1px solid #e9eaec;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 33px;
        .sfmu {
            position: absolute;
            left: 8px;
            line-height: 7px;
            padding-left: 4px;
            cursor: pointer;
        }
    }
    .orh-trees-tree {
        position: absolute;
        left: 0;
        top: 40px;
        bottom: 0;
        width: 200px;
        border-right: 1px solid #e9eaec;
        overflow: auto;
        .cont_heads {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 40px;
            padding: 0 15px;
            border-bottom: 1px solid #e9eaec;
            .right_handels {
                width: auto;
                display: flex;
                justify-content: flex-end;
            }
        }
        .tresscon {
            padding: 15px 17px;
        }
    }
    .orh-trees-body {
        position: absolute;
        left: 200px;
        top: 40px;
        right: 0;
        bottom: 0;
        .orh-trees-body-heads {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 40px;
            padding: 0 15px;
            border-bottom: 1px solid #e9eaec;
            .right_handels {
                width: auto;
                display: flex;
                justify-content: flex-end;
            }
        }
        .orh-trees-body-tags {
            height: 40px;
            border-bottom: 1px solid #e9eaec;
        }
        .orh-trees-body-content {
            position: absolute;
            bottom: 0; left: 0; right:0;
            overflow: hidden;
        }
        .icon_handel {
            cursor: pointer;
            margin-right: 20px;
        }
        &-custom {
            width: 100%;
        }
    }
}
</style>
